<template>
  <div class="box">
    <div align="center">
      <img  src="static/img/logo.png">
    </div>

    <div class="ding" style="height: 60px"></div>
    <div class="login-box">

      <h2>用户登录</h2>
      <el-form :model="ruleForm"  ref="ruleForm" label-width="80px">
        <el-form-item label="账号" prop="name" class="user-box" style="margin-right: 20px;">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password" class="user-box" style="margin-right: 20px;">
          <el-input v-model="ruleForm.password" show-password>
          </el-input>
        </el-form-item>
        <el-form-item style="padding-bottom: 20px;margin-left: 40px;">
          <span><a><el-button type="primary" round @click="login()">登录</el-button></a></span>
          <span><a><el-button type="primary" round @click="dialogFormVisible = true">注册</el-button></a></span>
        </el-form-item>
        <el-dialog title="用户注册" :visible.sync="dialogFormVisible" center>
          <!-- 插入测试 -->
          <el-form :model="ruleForm2" status-icon  ref="ruleForm2" label-width="100px"
                   class="demo-ruleForm">

            <el-form-item label="账号" prop="name">
              <el-input v-model.text="ruleForm2.name" placeholder="请输入账号"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="ruleForm2.password" auto-complete="off" placeholder="请输入密码"></el-input>
            </el-form-item>

            <el-form-item label="真实姓名" prop="username">
              <el-input v-model.text="ruleForm2.username" placeholder="请输入真实姓名"></el-input>
            </el-form-item>



          </el-form>
          <!-- 插入测试 -->

          <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm('ruleForm2')">取 消</el-button>

            <el-button style="margin-left: 80px" type="primary" @click="submitForm(ruleForm2)">注 册</el-button>
          </div>
        </el-dialog>
      </el-form>
    </div>
  </div>

</template>

<script>
    export default {
        name: "login",
      data() {
        return {

          dialogFormVisible: false,
          ruleForm: {
            name: '',
            password: '',
            region: '',

          },
          rules: {
            //登陆表单
            name: [
              {required: true, message: '请输入用户名', trigger: 'blur',},
              {min: 3, max: 8, message: '长度在 3 到 8个字符', trigger: 'blur'}
            ],
            password: [
              {required: true, message: '请输入密码', trigger: 'blur'},
              {min: 1, message: '密码长度不少于1个字符', trigger: 'blur'}
            ],
            my_check: [
              {required: true, message: '请输入验证码', trigger: 'blur'}
            ]
          },
          //注册表单

          /*插入form方法*/
          /*设定规则指向*/
          ruleForm2: {

          },


          /*插入form方法*/

          dialogTableVisible: false,
          form: {
            name: '',
            type: [],
            resource: '',
            desc: ''
          },
          formLabelWidth: '120px'
        };
        /*插入form方法*/
        var checkNum = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('账号不能为空'));
          }
          setTimeout(() => {
            if (!Number.isInteger(value)) {
              callback(new Error('请输入数字值'));
            } else {
              var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
              if (!myreg.test(value)) {
                callback(new Error('请输入正确的手机号码'));
              } else {
                callback();
              }

            }
          }, 1000);
        };
        var validatePass = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入密码'));
          } else {

            callback();
          }
        };
      },
      methods:{
        async login() {
          let that =this;
          let password=this.$md5(this.ruleForm.password)
          let params = new URLSearchParams()
          params.append('username', this.ruleForm.name)
          params.append('password', password)
          axios.post(this.ip+"user/login",
            params,
            {headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }})
            .then(function (login) {
              if (login.data.username) {

                localStorage.setItem("username", login.data.username);
                localStorage.setItem("id", login.data.id);
                localStorage.setItem("token", login.data.password);

                that.$message({
                  message: "登陆成功",
                  type: "success"
                })

                that.$router.push({path: '/manager/info'});跳转页面
              } else {
                that.$message({
                  message: login.data,
                  type: "warning"
                })
              }
            })
            .catch(function (error) {
              console.log(error);
            });



        },
        async submitForm(formName) {

          let that = this;

          var p = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/
          if(p.test(formName.name)==false){
            this.$message({
              message:"账号需要字母开头，允许5-16字节，允许字母数字下划线",
              type:"error"
            })
          }else {

            let password = this.$md5(this.ruleForm2.password)
            let params = new URLSearchParams()
            params.append('username', this.ruleForm2.name)
            params.append('password', password)
            params.append('realname', this.ruleForm2.username)
            axios.post(this.ip+"user/reg",
              params,
              {headers: {
                  'Content-Type': 'application/x-www-form-urlencoded'
                }})
              .then(function (res) {
                if(res.data==="success"){
                  that.$message({
                    message:"注册成功",
                    type:"success"
                  })
                  that.dialogFormVisible=false
                  that.$refs["ruleForm2"].resetFields();
                }else {
                  that.$message({
                    message:res.data,
                    type:"error"
                  })
                }
              })
              .catch(function (error) {
                console.log(error);
              });

          }

        }
      }
    }
</script>

<style scoped>

  body > .el-container {
    margin-bottom: 40px;
  }

  .login-box {

    left: 50%;
    width: 500px;
    height: 320px;
    padding: 30px;
    margin: 0 auto;
    background: rgba(0, 0, 3, .1);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
    border-radius: 10px;
  }

  .login-box h2 {
    margin: 0 0 30px;
    padding: 0;
    color: #fff;
    text-align: center;
  }

  .login-box .user-box {
    position: relative;
  }

  .login-box .user-box input {
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    margin-bottom: 30px;
    border: none;
    border-bottom: 1px solid #fff;
    outline: none;
    background: transparent;
  }

  .login-box .user-box label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    pointer-events: none;
    transition: .5s;
  }

  .login-box .user-box input:focus ~ label,
  .login-box .user-box input:valid ~ label {
    top: -20px;
    left: 0;
    color: #03e9f4;
    font-size: 12px;
  }

  .login-box form a {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    color: #03e9f4;
    font-size: 16px;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    transition: .5s;
    margin-top: 10px;
    letter-spacing: 4px
  }

  .login-box a:hover {
    background: #03e9f4;
    color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 5px #03e9f4,
    0 0 25px #03e9f4,
    0 0 50px #03e9f4,
    0 0 100px #03e9f4;
  }

  .login-box a span {
    position: absolute;
    display: block;
  }

  .login-box a span:nth-child(1) {
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #03e9f4);
    animation: btn-anim1 1s linear infinite;
  }

  @keyframes btn-anim1 {
    0% {
      left: -100%;
    }
    50%, 100% {
      left: 100%;
    }
  }

  .login-box a span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #03e9f4);
    animation: btn-anim2 1s linear infinite;
    animation-delay: .25s
  }

  @keyframes btn-anim2 {
    0% {
      top: -100%;
    }
    50%, 100% {
      top: 100%;
    }
  }

  .login-box a span:nth-child(3) {
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent, #03e9f4);
    animation: btn-anim3 1s linear infinite;
    animation-delay: .5s
  }

  @keyframes btn-anim3 {
    0% {
      right: -100%;
    }
    50%, 100% {
      right: 100%;
    }
  }

  .login-box a span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #03e9f4);
    animation: btn-anim4 1s linear infinite;
    animation-delay: .75s
  }

  @keyframes btn-anim4 {
    0% {
      bottom: -100%;
    }
    50%, 100% {
      bottom: 100%;
    }
  }

  .box {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-image: linear-gradient(135deg, #FFD26F 10%, #3677FF 100%);
  }
</style>
